<!-- 新建楼栋-基本信息 -->
<template>
	<view class="basic-container">
		<u-steps :list="numList" :current="0" mode="number"></u-steps>
		<u-gap height="12" bgColor="#F7F7F7"></u-gap>
		<view class="cell">
			<u-cell-group>
				<u-form :model="form">
					<u-cell-item title="楼栋名称" center :arrow="false">
						<u-input v-model="form.floorName" placeholder="请输入楼栋名称" input-align="right" :border="false">
						</u-input>
					</u-cell-item>
					<u-cell-item title="建筑性质" center :isLink="true" @click="showNatureCell = true">
						<text v-if="form.floorType" style="color: #333">
							{{form.floorType}}
						</text>
						<text v-else style="color: rgb(192, 196, 204);font-size: 28rpx;">请输入建筑性质</text>
						<u-select v-model="showNatureCell" mode="single-column" @confirm="changeNature" :list="columnsNature"></u-select>
					</u-cell-item>
					<u-cell-item title="楼栋层数" center :arrow="false">
						<u-input type="number" v-model="form.floorNums" placeholder="请输入楼栋层数" input-align="right"
							:border="false">
						</u-input>
					</u-cell-item>
					<u-cell-item title="单元数" center :arrow="false">
						<u-input type="number" v-model="form.floorUnitNums" placeholder="请输入单元数" input-align="right"
							:border="false">
						</u-input>
					</u-cell-item>
					<u-cell-item title="每层户数" center :arrow="false">
						<u-input type="number" v-model="form.floorHouse" placeholder="请输入每层户数" input-align="right"
							:border="false">
						</u-input>
					</u-cell-item>
					<u-cell-item title="房间号规则" center :isLink="true" @click="showRulesCell = true">
						<text v-if="form.floorRule" style="color: #333">
							{{form.floorRule}}
						</text>
						<text v-else style="color: rgb(192, 196, 204);font-size: 28rpx;">请输入房间号规则</text>
						<u-select v-model="showRulesCell" mode="single-column" @confirm="changeRules" :list="columnsRules"></u-select>
					</u-cell-item>
				</u-form>
			</u-cell-group>
		</view>
		<view class="btns">
			<button @click="next()">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		createFloorTemplate
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				numList: [{
					name: '基本信息'
				}, {
					name: '楼层模板'
				}, {
					name: '房间设置'
				}],
				defaultValue: 1,
				columnsNature: [{
						value: '1',
						label: '公寓'
					},
					{
						value: '2',
						label: '住宅'
					},
					{
						value: '3',
						label: '别墅'
					}
				],
				columnsRules: [
					{
						value: '1',
						label: '楼层+号码'
					}
				],
				showNatureCell: false, // 建筑性质
				showRulesCell: false, // 房间号规则
				form: {
					floorName: '',
					floorType: '',
					floorNums: '',
					floorUnitNums: '',
					floorHouse: '',
					floorRule: '',
				}
			}
		},
		methods: {
			// 下拉选择值
			changeNature(e) {
				this.form.floorType = e[0].label;
			},
			changeRules(e) {
				this.form.floorRule = e[0].label;
			},
			// 下一步
			next() {
				if (this.form.floorName == "") {
					uni.showToast({
						title: '楼栋名称不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.form.floorType == "") {
					uni.showToast({
						title: '建筑性质不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.form.floorNums == "") {
					uni.showToast({
						title: '楼栋层数不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.form.floorUnitNums == "") {
					uni.showToast({
						title: '单元数不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.form.floorHouse == "") {
					uni.showToast({
						title: '每层户数不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.form.floorRule == "") {
					uni.showToast({
						title: '房间号规则不能为空',
						icon: "none",
						duration: 2000
					});
					return;
				}
				var reg = /^[0-9]*[1-9][0-9]*$/;
				if (!reg.test(this.form.floorNums)) {
					uni.showToast({
						title: '楼栋层数只能是正整数',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!reg.test(this.form.floorUnitNums)) {
					uni.showToast({
						title: '单元数只能是正整数',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!reg.test(this.form.floorHouse)) {
					uni.showToast({
						title: '每层户数只能是正整数',
						icon: "none",
						duration: 2000
					});
					return;
				}
				this.getTemplate(this.form);
			},
			// 生成模板
			getTemplate(args) {
				const param = {
					floorHouse: args.floorHouse, // 每层户数
					floorRule: 1, // 房间号规则
					floorUnitNums: args.floorUnitNums, // 单元数
				};
				createFloorTemplate(param).then(data => {
					if (data.data.code == 1) {
						uni.setStorageSync("basicTemplate", data.data.object)
						uni.setStorageSync("floorNums", this.form.floorNums)
						uni.setStorageSync("basicForm", this.form)
						uni.navigateTo({
							url: "../formwork/formwork"
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.cell {
		width: 90%;
		margin: auto;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.btns {
		position: fixed;
		bottom: 50rpx;
		width: 90%;
		margin: auto;
		text-align: center;
		left: 0;
		right: 0;

		button {
			line-height: 90rpx;
			background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
			height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			margin: auto;
			width: 100%;
		}
	}

	/deep/.u-gap {
		margin-top: 40rpx !important;
		margin-bottom: 10rpx !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		text-align: right !important;
		margin-right: 20rpx;
		font-size: 32rpx !important;
	}

	/deep/.u-cell__title-text {
		font-size: 32rpx !important;
		color: #333 !important;
	}
</style>
